<template>
  <div>
    <!-- Card -->
    <el-card class="box-card">
      <!-- 表单域 -->
      <select-area :formObj="basicsForm" @searchQuestList="getBaseQuestionList" @resetForm="resetForm"></select-area>
      <!-- 表单域   END -->

      <!-- 表格域 -->
      <div class="table-area">
        <el-alert class="alert-total" type="info" show-icon :closable="false">
          <template #title>数据共{{counts}}条</template>
        </el-alert>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号"
            width="130">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="100">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录"
            width="100">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="120">
            <template #default="{row}">
              <div>{{row.questionType | formatQuesType}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            label="题干"
            width="200">
            <template #default="{row}">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间">
            <template #default="{row}">
              <div>{{row.addDate | formatTime}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度">
            <template #default="{row}">
              <div>{{row.difficulty | formatDiff}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="creator"
            label="录入人">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button circle plain size="mini" type="primary" icon="el-icon-view" @click="previewBtnClick(row.id)"></el-button>
              <el-button circle plain size="mini" type="success" icon="el-icon-edit" @click="editBtnClick(row.id)"></el-button>
              <el-button circle plain size="mini" type="danger" icon="el-icon-delete" @click="delBtnClick(row.id)"></el-button>
              <el-button circle plain size="mini" type="warning" icon="el-icon-check" @click="favoriteBtnClick(row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination-area"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="basicsForm.page"
          :page-sizes="[2, 5, 10]"
          :page-size="basicsForm.pagesize"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="counts">
        </el-pagination>
      </div>
      <!-- 表格域   END -->
    </el-card>
    <!-- Card   END -->

    <!-- dialog -->
    <preview-info
      v-if="VisiblePreview"
      :id="previewID"
      :VisiblePreview="VisiblePreview"
      @ClosePreview="VisiblePreview = false">
    </preview-info>
    <!-- dialog   END -->
  </div>
</template>

<script>
import { delBasicsQues, choiceQues, getBaseQuesList } from '@/assets/api/subject/subject'
import SelectArea from '@/components/basemanagement/select-area'
import PreviewInfo from '@/views/basemanagement/preview'

export default {
  components: {
    PreviewInfo,
    SelectArea
  },
  data () {
    return {
      // 表格内容
      tableData: [],
      // 列表传参
      basicsForm: {
        // 分页-当前页码
        page: 1,
        // 每页条数
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      // 数据总量/条数
      counts: 20,
      // 预览弹出框
      VisiblePreview: false,
      previewID: ''
    }
  },
  created: function () {
    // 获取题库
    this.getBaseQuestionList()
  },
  methods: {
    // 获取题库列表
    async getBaseQuestionList () {
      try {
        const { data } = await getBaseQuesList(this.basicsForm)
        this.tableData = data.items
        this.counts = data.counts
      } catch (error) {
        this.$message({
          message: '获取题库列表失败',
          type: 'warning'
        })
      }
    },
    resetForm () {
      this.basicsForm = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      }
    },
    // 表格按钮功能实现
    previewBtnClick (id) {
      this.VisiblePreview = true
      this.previewID = id
    },
    editBtnClick (id) {
      // 跳转到试题录入
      this.$router.push({
        path: '/entry',
        query: {
          id
        }
      })
    },
    delBtnClick (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delBasicsQues(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.$nextTick(this.getBasicsQuestionList)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    favoriteBtnClick (id) {
      this.$confirm('此操作将将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'primary'
      }).then(async () => {
        await choiceQues(id)
        this.$message({
          type: 'success',
          message: '成功加入精选题库!'
        })
        this.$router.push({
          path: '/choiceness'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加'
        })
      })
    },

    // 分页每页条数变化
    handleSizeChange (val) {
      this.basicsForm.pagesize = val
      this.getBaseQuestionList()
    },
    // 当前页下标变化
    handleCurrentChange (val) {
      this.basicsForm.page = val
      this.getBaseQuestionList()
    }
  },
  filters: {
    formatQuesType (val) {
      let type = ''
      switch (val) {
        case '1':
          type = '单选';
          break;
        case '2':
          type = '多选';
          break;
        case '3':
          type = '简答';
          break;
        default:
          break;
      }
      if (type) {
        return type
      } else {
        return val
      }
    },
    formatDiff (val) {
      let type = ''
      switch (val) {
        case '1':
          type = '简单';
          break;
        case '2':
          type = '一般';
          break;
        case '3':
          type = '困难';
          break;
        default:
          break;
      }
      if (type) {
        return type
      } else {
        return val
      }
    }
  }
}
</script>

<style scoped>
.alert-total {
  margin: 20px auto;
}

.pagination-area {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

</style>
